
<template>
    <LoginLayout>
        <div class="box-grow-1 dir-top-nowrap">
            <div class="box-grow-0 biaoti">登录</div>
            <div class="box-grow-1 dir-top-nowrap main-between cont">
                <div>
                    <NuxtLink to="/">
                        <img class="logo" src="/imgs/logo.png" />
                    </NuxtLink>
                    <div class="dir-top-nowrap gap srk">
                        <div>
                            <input class="input" type="text" v-model="form.username" placeholder="清输入昵称" />
                        </div>
                        <div>
                            <input class="input" type="password" v-model="form.password" placeholder="请输入密码" />
                        </div>
                        <div>
                            <div class="submit" @click="submit">登录</div>
                            <div class="main-between wjmm">
                                <div class="l">
                                    <NuxtLink :to="{ name: 'login-forget' }">忘记密码</NuxtLink>
                                </div>
                                <div class="r">
                                    <span>还没账号?</span>
                                    <NuxtLink :to="{ name: 'login-register' }">注册</NuxtLink>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="dir-left-nowrap main-center gap tubiao">
                        <img class="icon" @click="thirdLogin()" src="/imgs/login/weixin.png" />
                        <img class="icon" @click="thirdLogin()" src="/imgs/login/QQ.png" />
                        <img class="icon" @click="thirdLogin()" src="/imgs/login/weibo.png" />
                    </div>
                    <div class="main-center xieyi">
                        <div class="dir-left-nowrap cross-center" style="gap: 5px;">
                            <div class="checkbox" :class="[{ 'active': isAgree }]" @click="isAgree = !isAgree"></div>
                            <span>我已阅读并同意</span>
                            <!-- <NuxtLink href="./agreement.html">网站协议</NuxtLink> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </LoginLayout>
</template>

<script setup lang="ts">
import { NuxtLink } from "#components";
import { useUserStore } from "@/stores";
import { login } from "~/api";
import { Code } from "~~/global";

definePageMeta({
    layout: false,
})

const { setAccessToken } = useUserStore()

const isAgree = ref(false)

const form = ref({
    username: '',
    password: '',
})
async function submit() {
    const { username, password } = form.value
    const res = await login(username, password)
    if (res.code != Code.success) {
        return console.log(res.msg);
    }
    setAccessToken(res.data.access_token)
    console.log(res.msg);
    navigateTo('/')
}

/**
 * 第三方登录
 */
function thirdLogin() {
    console.log("thirdLogin")
}

</script>

<style lang="scss" scoped>
.biaoti {
    font-size: 25px;
    font-weight: 600;
    color: #333333;
}

.cont {
    text-align: center;

    .logo {
        width: 177px;
        height: 76px;
        vertical-align: middle;
        margin-bottom: 20px;
    }

    .srk {
        padding: 0 50px;

        .input {
            width: 100%;
            height: 40px;
            background: #F5F5F5;
            border-radius: 6px;
            border: 0;
            padding: 0 10px;
        }

        .submit {
            color: #fff;
            background: #f86a8e;
            text-align: center;
            margin-bottom: 0;
            height: 40px;
            line-height: 40px;
            border-radius: 6px;
        }

        .wjmm {
            margin-top: 13px;
            font-size: 12px;

            .l {
                a {
                    color: #F9688F;
                }
            }

            .r {
                a {
                    margin-left: 5px;
                    color: #F9688F;
                }
            }
        }
    }

    .dsf {
        text-align: center;
        font-size: 12px;
        color: #333;

        span {

            &:before,
            &:after {
                content: '';
                display: inline-block;
                width: 100px;
                height: 1px;
                background: #efefef;
                vertical-align: middle;
                margin: 0 10px;
            }
        }
    }

    .tubiao {
        margin: 30px 0;

        .icon {
            cursor: pointer;
            width: 50px;
            height: 50px;
        }
    }

    .xieyi {
        text-align: center;
        font-size: 12px;

        .checkbox {
            cursor: pointer;
            display: inline-block;
            position: relative;
            width: 14px;
            height: 14px;
            border: 1px solid #F9688F;
            border-radius: 50%;

            &.active::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                border-radius: 50%;
                background: #F9688F;
                transform: scale(.7);
            }
        }

        a {
            color: #F9688F;
        }
    }
}
</style>
